<template>
    <!-- Using ECharts graphic elements for display, so chartDom might not be needed for direct interaction -->

    <div>

        <div class="" style="display: flex;justify-content: space-around;margin-top: 40px;">
            <div style="display: flex;align-items: center">
                <div>
                    <div class="sex-img-1"></div>
                    <span style="margin-top: 10px;display: inline-block">男性职员</span>
                </div>
                <VueCountUp :end-val="33" :decimal-places="0" :duration="2">
                    <template #suffix>
                        <span style="font-size: 14px;color:white;">%</span>
                    </template>
                </VueCountUp>
            </div>
            <div style="display: flex;align-items: center">
                <div>
                    <div class="sex-img-2"></div>
                    <span style="margin-top: 10px;display: inline-block">女性职员</span>
                </div>
                <VueCountUp :end-val="67" :decimal-places="0" :duration="2">
                    <template #suffix>
                        <span style="font-size: 14px;color:white;">%</span>
                    </template>
                </VueCountUp>
            </div>

        </div>
        <div class="border-line">
            <div class="lien-color">
            </div>
            <div class="lien-color-2">

            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, shallowRef, computed } from 'vue';
import * as echarts from 'echarts/core';
import type { EChartsOption } from 'echarts';
import variables from '../../variables.less?raw';
import VueCountUp from "vue-countup-v3";


function getLessVariable(varName: string): string {
    const match = variables.match(new RegExp(`@${varName}:\\s*([^;]+);`));
    return match ? match[1].trim() : '#ccc';
}

const chartDom = ref<HTMLElement | null>(null);
const myChart = shallowRef<echarts.ECharts | null>(null);

// --- Data (Replace/Calculate as needed) ---
const totalStaff = ref(384); // Example total
const malePercent = ref(33);
const femalePercent = computed(() => 100 - malePercent.value);
const maleCount = computed(() => Math.round(totalStaff.value * (malePercent.value / 100)));
const femaleCount = computed(() => totalStaff.value - maleCount.value); // Ensure total adds up
// --- End Data ---

const axisLineColor = getLessVariable('axis-line-color');
const textColor = getLessVariable('text-color');
const maleColor = getLessVariable('male-color');
const femaleColor = getLessVariable('female-color');
const panelBg = getLessVariable('bg-color-base');

const option = computed((): EChartsOption => ({
    tooltip: { // Tooltip can still work on the invisible pie slices
        trigger: 'item',
        formatter: '{b}: {c}人 ({d}%)',
        backgroundColor: 'rgba(3, 28, 66, 0.9)',
        borderColor: axisLineColor,
        textStyle: { color: '#fff' }
    },
    graphic: [ // Using graphic elements for the main display
        { // Male Icon/Percent
            type: 'text', left: '25%', top: '30%',
            style: { text: '♂', fill: maleColor, fontSize: 35, fontWeight: 'bold', textAlign: 'center' }
        },
        {
            type: 'text', left: '25%', top: '55%',
            style: { text: malePercent.value + '%', fill: maleColor, fontSize: 20, fontWeight: 'bold', textAlign: 'center' }
        },
        {
            type: 'text', left: '25%', top: '75%',
            style: { text: '男性职员', fill: textColor, fontSize: 12, textAlign: 'center' }
        },
        { // Female Icon/Percent
            type: 'text', right: '25%', top: '30%',
            style: { text: '♀', fill: femaleColor, fontSize: 35, fontWeight: 'bold', textAlign: 'center' }
        },
        {
            type: 'text', right: '25%', top: '55%',
            style: { text: femalePercent.value + '%', fill: femaleColor, fontSize: 20, fontWeight: 'bold', textAlign: 'center' }
        },
        {
            type: 'text', right: '25%', top: '75%',
            style: { text: '女性职员', fill: textColor, fontSize: 12, textAlign: 'center' }
        },
    ],
    series: [ // Include a minimal pie series for tooltip/potential interaction layer
        {
            name: '性别分布', type: 'pie', radius: ['50%', '65%'], center: ['50%', '50%'],
            avoidLabelOverlap: false, label: { show: false }, labelLine: { show: false },
            emphasis: { scaleSize: 5 }, // Subtle hover effect on the ring
            data: [
                { value: maleCount.value, name: '男性职员' },
                { value: femaleCount.value, name: '女性职员' }
            ],
            itemStyle: {
                color: (params: any) => params.name === '男性职员' ? maleColor : femaleColor,
                borderWidth: 2,
                borderColor: panelBg // Use variable, should match actual panel background
            },
            // silent: true // Keep it interactive for tooltip
        }
    ]
}));

const resizeChart = () => myChart.value?.resize();

onMounted(() => {
    if (chartDom.value) {
        myChart.value = echarts.init(chartDom.value);
        myChart.value.setOption(option.value);
        window.addEventListener('resize', resizeChart);
    }
});

onUnmounted(() => {
    window.removeEventListener('resize', resizeChart);
    myChart.value?.dispose();
});

</script>

<style lang="less" scoped>
// .chart-container is defined globally or can be styled here if needed
.chart-container {
    width: 100%;
    height: 100%; // Make sure it fills the panel content area
    min-height: 150px; // Set minimum height
}
.sex-img-1{
    background-image: url("src/assets/man.png");
    height: 80px;
    width: 80px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.sex-img-2{
    background-image: url("src/assets/women.png");
    height: 80px;
    width: 80px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.border-line{
    margin-top: 30px;
    height: 30px;
    display: flex;
    width: 100%;
    align-items: center;
    border: 1px dashed #54b7e1;
}
.lien-color{
    background: #50aff8;
    width: 33%;
    height: 15px;
    border-radius: 10px;
}
.lien-color-2{
    background: #e47aae;
    width: 67%;
    height: 15px;
    border-radius: 10px;
}
</style>